import React, { useEffect } from 'react'
import { getList } from '../../api/index'
import './List.css'
import { useNavigate } from 'react-router-dom'
function Lists() {
    const navigate = useNavigate()
    const [list, setList] = React.useState<any[]>([])
    useEffect(() => {
        getList().then(res => {
            console.log(res);
            setList(res.data.data)
        })
    }, [])
    // 点击跳详情传id
    const click = (id: number) => {
        navigate('/details/' + id)
        console.log(id);
    }
    return (
        <div>
            <div>
                {
                    list.map(item => {
                        return <div onClick={() => click(item.id)} className='list' key={item.id}>
                            <div>
                                <img src={item.imgPath} alt="" />
                            </div>
                            <div>
                                <h4>{item.showName}</h4>
                                <div>{item.showDetail}</div>
                            </div>
                        </div>
                    })
                }
            </div>
        </div>
    )
}

export default Lists
